import React from 'react';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom'
import Home from './pages/Home'
import Video from './pages/Video'
import Skill from './pages/Skill'
import Basic from './pages/Basic'
import Hooks from './pages/Hooks'
import CreateContext from './pages/CreateContext'
import UseReducer from './pages/UseReducer'

function AppRouter(){
  let routerConfig = [
    {title:'博客首页', link:'/', exact: true, component: Home},
    {title:'视频教程', link:'/video', exact: false, component: Video},
    {title:'职场技能', link:'/skill', exact: false, component: Skill},
    {title:'基础Class写法', link:'/basic', exact: false, component: Basic},
    {title:'基础Hooks写法', link:'/hooks', exact: false, component: Hooks},
    {title:'hooks父子组件传值', link:'/createContext', exact: false, component: CreateContext},
    {title:'useReducer使用', link:'/useReducer', exact: false, component: UseReducer},

  ]
 return (
    <Router>
      <div className="mainDiv">
        <div className="leftNav">
          <h3>一级导航</h3>
          <ul>
            {
              routerConfig.map((value,key)=>{
                return <li key={key}><Link to={value.link}>{value.title}</Link></li>
              })
            }
            {/* <li><Link to="/">博客首页</Link></li>
            <li><Link to="/video">视频教程</Link></li>
            <li><Link to="/skill">职场技能</Link></li> */}
          </ul>
        </div>
        <div className="rightMain"> 
          {
            routerConfig.map((value,key)=>{
              return <Route key={key} path={value.link} exact={value.exact} component={value.component} />
            })
          }
          {/* <Route path="/" exact component={Home} />
          <Route path="/video" component={Video} />
          <Route path="/skill" component={Skill} /> */}
        </div>
      </div>
    </Router>
 )
}

export default AppRouter